<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="green_circle" :style="'top:'+navH+'px'"></view>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="green_content">
			<navigator :url="'/home/station/stationpage?id='+item.id" hover-class="none" class="supplierone" v-for="(item,index) in list" :key="index">
				<image :src="item.shop_image" mode="aspectFill" class="headimg"></image>
				<view class="oneinfo">
					<view class="namedes">
						<text>{{item.shopkeeper_name}}</text>
						<image :src="item.mimage" v-if="item.mimage" mode="widthFix"></image>
						<view class="xinyong_box">
							<view class="xin">信</view>
							<view class="xin_number">{{item.credit_value}}</view>
							<view class="shiming" v-if="item.realname">实</view>
							<view class="qiye" v-if="item.enterprise">企</view>
						</view>
					</view>
					<view class="clamp1 onedes">{{item.business}}</view>
				</view>
				<view @ :class="item.is_follow==0?'recommend_signon':'recommend_sign'" @click.stop="attention(index)">{{item.is_follow==0?'关注':'已关注'}}</view>
			</navigator>
		</view>
		
		<view class="not_more" v-if="list.length<1">
			<image src="/static/img/wpaihang.png" mode="widthFix"></image>
			<view class="text">暂无推荐</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator,shake;
	export default {
		data() {
			return {
				settingdata: {
					name: '供应商推荐',
					bgColor: '#38bf8d',
					titleColor: '#fff',
					showNav: true,
					showTypes: 0,
					position: "suppliers"
				},
				list: [],
				navH: 0,
				// 回到头部按钮距离
				scrollTop: 0
			}
		},
		onLoad() {
			_this = this
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('recdsupply', {
					client_uid:uni.getStorageSync("client_uid")?uni.getStorageSync("client_uid"):0
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
			attention(index){
				_this.click_shake(()=>{
					_this.$api.get("savefollow", {
						select_type:1,
						id:_this.list[index].id
					}).then(data => {
						_this.list[index].is_follow = _this.list[index].is_follow==1?0:1
					});
				})
			},
			
			// 防抖点击
			click_shake(fn){
				if(!_this.shake){
					fn && typeof fn === 'function' && fn()
					_this.shake=true
					setTimeout(function(){
						_this.shake=false
					},500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.green_circle {
		width: 100%;
		height: 80rpx;
		border-radius: 0 0 80rpx 80rpx;
		background-color: #38be8c;
		position: absolute;
		z-index: -1;
	}

	.green_content {
		padding-bottom: 20rpx;

		.supplierone {
			margin: 20rpx 25rpx 0 25rpx;
			padding: 28rpx 12rpx 38rpx 12rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: -2rpx 4rpx 35rpx 0 rgba(224, 229, 226, 0.44);
			border-radius: 20rpx;
			background-color: #fff;

			.headimg {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}

			.oneinfo {
				margin-left: 10rpx;
				width: 410rpx;
				display: flex;
				flex-direction: column;

				.namedes {
					display: flex;
					flex-direction: row;
					align-items: flex-end;

					text {
						color: #333333;
						font-size: 32rpx;
						max-width: 170rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					image {
						height: 36rpx;
						margin-left: 12rpx;
						max-width: 120rpx;
					}

					.xinyong_box {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-left: 8rpx;

						.xin {
							width: 30rpx;
							height: 30rpx;
							background: #00C575;
							border-radius: 3px 0 0 3rpx;
							text-align: center;
							line-height: 30rpx;
							color: #fff;
							font-size: 20rpx;
						}

						.xin_number {
							background-color: #fff;
							border: 2rpx solid #00C575;
							border-radius: 0 3rpx 3rpx 0;
							color: #00C575;
							font-size: 20rpx;
							text-align: center;
							height: 30rpx;
							line-height: 30rpx;
							min-width: 44rpx;
						}
					}
				}

				.onedes {
					margin-top: 19rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}

			.recommend_signon {
				margin-left: 14rpx;
				width: 130rpx;
				height: 54rpx;
				border-radius: 27rpx;
				text-align: center;
				line-height: 50rpx;
				color: #38BE8C;
				background: #fff;
				border: 2rpx solid #38BE8C;
			}

			.recommend_sign {
				margin-left: 14rpx;
				width: 130rpx;
				height: 54rpx;
				border-radius: 27rpx;
				text-align: center;
				line-height: 54rpx;
				color: #fff;
				background: #38BE8C;
			}
		}
	}
</style>
